<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>imgUpload</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/fileinput.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/fileinput.js"></script>
    <script type="text/javascript" src="../js/locales/zh.js"></script>
</head>

<body>
    <form enctype="multipart/form-data">
        <div class="form-group">
            <input id="file" class="file" type="file" name="file[]" multiple>
        </div>
    </form>
</body>
<script type="text/javascript">
$('#file').fileinput({
    // 'showCaption': true, //是否显示文件的标题。默认值true。
    // 'showPreview': true, //是否显示文件的预览图。默认值true。
    // 'showRemove': true, //是否显示删除/清空按钮。默认值true。
    // 'showUpload': true, //是否显示文件上传按钮。默认是submit按钮，除非指定了uploadUrl属性。默认值true。
    // 'showCancel': true, //是否显示取消文件上传按钮。只有在AJAX上传线程中该属性才可见可用。默认值true。
    'uploadUrl': '#', //上传路径 返回json数据
    // 'deleteUrl':'',删除图片时的请求路径
    'language': 'zh',
    'allowedPreviewTypes': ['image'], //允许预览类型
    'allowedFileExtensions': ['jpg', 'png', 'gif', 'jpeg'], //允许文件扩展名
    'autoReplace': true, //是否自动替换当前图片
    'maxFileSize': 0, //上传文件大小的最大值单位为kb，如果为0表示不限制文件大小
    'uploadExtraData': { id: 1 }, //上传文件时额外传递的参数设置
    'enctype': 'multipart/form-data',

    // captionClass: 在标题容器上额外的class。类型string。

    // previewClass: 在预览区域容器上的额外的class。类型string。

    // mainClass: 添加在文件上传主容器。类型string。

    // initialDelimiter:在initialPreview属性中用于上传多个文件时的分隔符。默认值：'*$$*'。

    // initialPreview: 类型string或array。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串，会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组，初始化预览图中会显示数组中所有的文件。
});
$(document).ready(function() {
    //选择文件时的回调
    $("#file").on("filebatchselected", function(event, files) {
        console.log(files);
    });
    // 点击浏览框右上角X 清空文件前响应事件
    $("#file").on("fileclear", function(event, data, msg) {
        console.log(event);
        console.log(data);
        console.log(msg);
    });
    //异步上传返回结果处理
    $("#file").on("fileuploaded", function(event, data, previewId, index) {
        var res = data.response; //后台返回的数据
        console.log(res);
        console.log(data);

    });
    $("#file").on('fileerror', function(event, data, msg) { //异步上传失败结果处理
        alert("uploadError");
    });

});
</script>

</html>